<template>
  <el-card shadow="always" style="margin-top: 15px;" :body-style="{ padding: '20px' }">
    <template #header>
      <div>
        <span>浙江地图</span>
      </div>
    </template>
    <div id="zjmap" style="width: 100%;height: 400px;" />
  </el-card>
</template>

<script setup>
import * as echarts from 'echarts'
import geoJson from './zhejiangMap'
import { onMounted } from 'vue'

// 初始化统计报表
const handleLoadZjmap = () => {
  var chartDom = document.getElementById('zjmap')// 这里放的“echarts2”就是你上方创建盒子的id
  var myChart = echarts.init(chartDom)
  var option
  myChart.showLoading()
  // 2、  这个geoJson数据可以自己在网上找相关的浙江省的数据，或者从后端的接口来调用数据
  myChart.hideLoading()
  // 下面这个geoJSON就是上面通过import 引入的自己制作的mapData.js文件
  echarts.registerMap('ZJ', geoJson.mapData)
  myChart.setOption(option = {
    // 4、  这个是放到一小块地图上展示的内容，他是根据series中的data数组来决定的name:b，value:c（b:  表示名称，c:  表示值）
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}  (分)'
    },
    // 6、  这个是根据data中的value值来相应的显示不同的颜色（在这里是根据人口密度来显示不同的颜色；）
    visualMap: {
      show: true,
      x: 'left',
      y: '58%', // 可以设置左边提示的位置；
      itemWidth: 12,
      itemHeight: 12,
      splitList: [
        { start: 0, end: 20, label: '轻微', color: '#29A4D7' }, { start: 20, end: 50, label: '一般', color: '#E6C249' },
        { start: 50, end: 60, label: '重点提示', color: '#DD970B' }, { start: 60, end: 80, label: '重大', color: '#5934EC' },
        { start: 80, end: 100, label: '重点关注', color: '#B52621' }
      ],
      textStyle: {
        color: '#fff' //  值域文字颜色
      },
      //  color:  ['#B52621',  '#5934EC',  '#DD970B',  '#E6C249',  '#29A4D7']
    },
    series: [
      {
        name: '浙江省地图',
        type: 'map',
        map: 'ZJ', //  自定义扩展图表类型
        //  设置每一块中具体文字
        label: {
          show: true,
          formatter: function(params) {
            return params.name + '\n' + params.value
          },
          fontWeight: 'normal',
          fontSize: 12,
          color: '#ccc'
        },
        //  下面这个可以设置鼠标悬停上面的效果
        emphasis: { // 对应的鼠标悬浮效果
          //  show:  true,
          label: {
            color: '#ccc',

          },
          itemStyle: {
            areaColor: '#CCC'
          }
        },
        itemStyle: {
          // 设置边框为白色
          borderWidth: 0.5, // 边际线大小
          borderColor: '#fff', // 边界线颜色
        },
        data: [
          {
            name: '湖州市',
            value: 87,
          },
          {
            name: '嘉兴市',
            value: 22,
          },
          {
            name: '杭州市',
            value: 65,
          },
          {
            name: '绍兴市',
            value: 43,
          },
          {
            name: '舟山市',
            value: 11,
          },
          {
            name: '宁波市',
            value: 54,
          },
          {
            name: '金华市',
            value: 33,
          },
          {
            name: '台州市',
            value: 56,
          },
          {
            name: '丽水市',
            value: 12,
          },
          {
            name: '温州市',
            value: 78,
          },
          {
            name: '衢州市',
            value: 43,
          },
        ],
      }
    ]
  })
  option && myChart.setOption(option)
  // 下面这个是做屏幕适配的
  window.addEventListener('resize', function() {
    myChart.resize()
    //  console.log('#2334434545')
  })
}

onMounted(() => {
  handleLoadZjmap()
})

</script>
